<script type="text/javascript"><!--//--><![CDATA[//><!--

    var grid_reload = function() {
        $('#datagrid').datagrid('reload', $('#fm_search').serializeObject());
    };
	
	var f_visible_click = function(obj){
		if($(obj).is(':checked')){
			$(obj).parent().parent().parent().find('input').each(function(i,el){ $(el).setval('1'); if(i>0)$(el).enabled(); });
		}else{
			$(obj).parent().parent().parent().find('input').each(function(i,el){ $(el).setval('0'); if(i>0)$(el).disabled(); });
		}
	};
	
    $(document).ready(function() {
		// Setup Form
		$('#fm_search').setupForm([
			{ name: 'role_id', type:'combo', size:'long', data:<?php echo json_encode($arr_role); ?>, onChange:grid_reload }
		]);
		
		// Create Datagrid
        $('#datagrid').datagrid(
        {
            url: gs_path + '/' + controller + '/getdata',
            queryParams: $('#fm_search').serializeObject(),
            height: 400,
            pagination: true,
            singleSelect: false,
			columns: [[
				{ field: 'menu_level', hidden:true },
				{ field: 'menu_id', title:'Menu Id', align:'center', width:90 },
				{ field: 'menu_label', title: 'Label', width: 340, 
					formatter:function(val,row){
						var ls_space = '';
						for(var i=1,max_i=(row.menu_level-0); i<max_i; i++){
							ls_space += ' &nbsp; &nbsp; &nbsp; &nbsp; ';
						}
						return ls_space+val;
					}},
				{ field: 'url', title: 'URL', width: 300 },
				{ field: 'visible', title: 'Visible', width: 40, align:'center', formatter:function(val){ return '<input type="checkbox" class="chk_visible" onclick="f_visible_click(this);" '+(val=='1' ? 'checked="checked" ' : '')+'/>'; } },
				{ field: 'c', title: 'C', width: 30, align:'center', formatter:function(val){ return '<input type="checkbox" class="chk_c" '+(val=='1' ? 'checked="checked" ' : '')+'/>'; } },
				{ field: 'r', title: 'R', hidden:true, width: 30, align:'center', formatter:function(val){ return '<input type="checkbox" class="chk_r" '+(val=='1' ? 'checked="checked" ' : '')+'/>'; } },
				{ field: 'u', title: 'U', width: 30, align:'center', formatter:function(val){ return '<input type="checkbox" class="chk_u" '+(val=='1' ? 'checked="checked" ' : '')+'/>'; } },
				{ field: 'd', title: 'D', width: 30, align:'center', formatter:function(val){ return '<input type="checkbox" class="chk_d" '+(val=='1' ? 'checked="checked" ' : '')+'/>'; } },
				{ field: 'pr', title: 'P', width: 30, align:'center', formatter:function(val){ return '<input type="checkbox" class="chk_d" '+(val=='1' ? 'checked="checked" ' : '')+'/>'; } },
				{ field: 'dw', title: 'Download', width: 60, align:'center', formatter:function(val){ return '<input type="checkbox" class="chk_d" '+(val=='1' ? 'checked="checked" ' : '')+'/>'; } }/*,
				{ field: 'icon', title: 'Icon', width: 100 }*/
			]],
			onLoadSuccess:function(){
				var arr_data = $('#datagrid').datagrid('getData').rows;
				$(arr_data).each(function(i,row){ 
					if(row.visible=='1'){
						$('#datagrid').datagrid('selectRow',i);
					}else{
						var $tr = $('#datagrid').parent().find('.datagrid-view2 .datagrid-body tbody > tr').eq(i);
						$tr.find('input').each(function(j,el){ if(j>0){ $(el).disabled(); } });
					}
				});
			},
			onClickRow:function(rowIndex){
				var $tr = $('#datagrid').parent().find('.datagrid-view2 .datagrid-body tbody > tr').eq(rowIndex);
				if($tr.find('input').eq(0).is(':checked')){
					$tr.find('input').each(function(j,el){ if(j>0){ $(el).enabled(); } });
					$('#datagrid').datagrid('selectRow',rowIndex);
				}else{
					$tr.find('input').each(function(j,el){ if(j>0){ $(el).disabled(); } });
					$('#datagrid').datagrid('unselectRow',rowIndex);
				}
			}
        });
        
        // Set Action Button
        var buttons = [
                        // ----- >> Recopy Button
                        { label: 'Save', icon: 'save', onclick: function() {
							
							var arr_selected = [];
							var rows = $('#datagrid').datagrid('getSelections');
							$(rows).each(function(i,row){ arr_selected.push(row.menu_id); });
							
							var arr_data = [];
							var rows = $('#datagrid').datagrid('getData').rows;
							
							$(rows).each(function(i,row){ 
								arr_data.push({ name:'data['+i+'][role_id]', value:$('#role_id').val() });
								arr_data.push({ name:'data['+i+'][menu_id]', value:row.menu_id });
								
								var $tr = $('#datagrid').parent().find('.datagrid-view2 .datagrid-body tbody > tr').eq(i);
								var $checkbox = $tr.find('input');
								arr_data.push({ name:'data['+i+'][visible]', value:($checkbox.eq(0).is(':checked') ? '1' : '0') });
								arr_data.push({ name:'data['+i+'][c]', value:($checkbox.eq(1).is(':checked') ? '1' : '0') });
								arr_data.push({ name:'data['+i+'][r]', value:($checkbox.eq(2).is(':checked') ? '1' : '0') });
								arr_data.push({ name:'data['+i+'][u]', value:($checkbox.eq(3).is(':checked') ? '1' : '0') });
								arr_data.push({ name:'data['+i+'][d]', value:($checkbox.eq(4).is(':checked') ? '1' : '0') });
								arr_data.push({ name:'data['+i+'][pr]', value:($checkbox.eq(5).is(':checked') ? '1' : '0') });
								arr_data.push({ name:'data['+i+'][dw]', value:($checkbox.eq(6).is(':checked') ? '1' : '0') });
							});
							
							setLoading(true);
							$.ajax({ type: 'POST', url: gs_path+'/'+controller+'/ajax_post', data: jQuery.param(arr_data), cache: false, 
								success: function(data) { if (data != '') alert(data); setLoading(false); grid_reload(); }, 
								error: function(xhr, ajaxOptions, thrownError) { setLoading(false); var ls_message = ''; if (xhr.status == 0) { ls_message = 'You are offline!!\n Please Check Your Network.' } else if (xhr.status == 404) { ls_message = 'Requested URL not found.' } else if (xhr.status == 500) { ls_message = 'Internal Server Error.' } else if (thrownError == 'parsererror') { ls_message = 'Error.\nParsing JSON Request failed.' } else if (thrownError == 'timeout') { ls_message = 'Request Time out.' } else { ls_message = 'Unknow Error.\n' + xhr.responseText } alert(ls_message) }, dataType: "html" 
							});
						}}];
        setAction(buttons);
		
		$('#access_info').setTooltips('Pilih Role terlebih dahulu, kemudian check menu pada tabel yang akan diberikan hak akses kepada role yang dipilih. Setelah itu klik tombol Save di kanan atas untuk menyimpan data.');
		$('#fm_search').focusFirst();
		
		// Patching css Datagrid Width
		var ln_width = $('.content_box .datagrid-wrap:first').width();
		$('.content_box .datagrid-wrap:first').css('width',(ln_width-17)+'px');
    });
//--><!]]></script>

    
<div id="tb" style="padding:5px;height:auto">
    <div>
        <form id="fm_search" onsubmit="grid_reload(); return false;">
        	<table class="tb_form" style="margin-bottom:0px">
            <tr>
            	<td width="200">Role</td>
                <td><input id="role_id" />
                	<a href="#" id="access_info"><img src="<?php echo base_url(); ?>content/images/ico_info.png" /></a>
                </td>
            </tr>
            <tr>
            	<td>Keyword</td>
                <td><input type="text" id="keyword" name="keyword" class="textfield medium" />
                	<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="grid_reload(); return false;">Search</a>
                </td>
            </tr>
            </table>
        </form>
    </div>
</div>
<div id="datagrid" toolbar="#tb"></div>